<script setup>
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
const formState = ref({
  name: "****网络有限公司",
  code: "90040101MA9WONTK64",
  tel: "546543198003112250",
  password: "3198003112250",
});
const labelCol = {
  style: {
    width: "150px",
  },
};
const wrapperCol = {
  span: 14,
};

const seconds_tel = ref(60);
const seconds_password = ref(60);

// let seconds_forgot = reactive(60)
const isCountingDown_tel = ref(false);
const isCountingDown_password = ref(false);
// let isCountingDown_forgot = reactive(false)

const countdownConfig = reactive({
  seconds_forgot: 60,
  isCountingDown_forgot: false,
  timerId: null,
});

const handleCaptchaClick = (name) => {
  console.log("name: =》》》》", name);
  if (name === "tel") {
    if (!isCountingDown_tel.value) {
      isCountingDown_tel.value = true;
      const intervalId = setInterval(() => {
        if (seconds_tel.value > 0) {
          seconds_tel.value--;
        } else {
          clearInterval(intervalId);
          isCountingDown_tel.value = false;
          seconds_tel.value = 60; // 重置秒数
        }
      }, 1000);
    }
  } else if (name === "forgot") {
    // if (countdownConfig.isCountingDown) {
    //   // 如果倒计时正在进行中，不执行任何操作
    //   return
    // }
    startCountdown();
  } else if (name === "password") {
    // startCountdown()
    if (!isCountingDown_password.value) {
      isCountingDown_password.value = true;
      const intervalId = setInterval(() => {
        if (seconds_password.value > 0) {
          seconds_password.value--;
        } else {
          clearInterval(intervalId);
          isCountingDown_password.value = false;
          seconds_password.value = 60; // 重置秒数
        }
      }, 1000);
    }
  }
};
const startCountdown = () => {
  if (!countdownConfig.isCountingDown_forgot) {
    countdownConfig.isCountingDown_forgot = true;
    countdownConfig.timerId = setInterval(() => {
      if (countdownConfig.seconds_forgot > 0) {
        countdownConfig.seconds_forgot--;
      } else {
        clearInterval(countdownConfig.timerId);
        countdownConfig.isCountingDown_forgot = false;
        countdownConfig.seconds_forgot = 60; // 重置秒数
      }
    }, 1000);
  }
};

const onSave = () => {
  console.log("onSave: ", formState);
};
const cancel = () => {
  console.log("cancel: ", formState);
};
</script>
<template>
  <div class="app-container">
    <a-card
      title="换绑手机号"
      class="box-card"
      bordered
      headStyle="text-align: center;font-weight: bold;font-size: 20px;"
      v-if="route.params.switchingType && route.params.switchingType == 1"
    >
      <div class="process margintop18">
        <div class="step">
          <div class="step-number completed">1</div>
          <div class="step-label">登录账号验证身份信息</div>
        </div>
        <div class="step">
          <div class="step-number active">2</div>
          <div class="step-label">输入新手机号并发送验证码</div>
        </div>
        <div class="step">
          <div class="step-number">3</div>
          <div class="step-label">确认手机号、验证码</div>
        </div>
        <div class="step">
          <div class="step-number">4</div>
          <div class="step-label">换绑成功</div>
        </div>
      </div>
      <div class="tips_box margintop18">
        <a-typography-title :level="5" class="tips"
          ><ExclamationCircleOutlined />温馨提示</a-typography-title
        >
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="① 换绑成功的手机号可用于登录账号、找回密码、接受验证码等所有功能。"
        />
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="② 一个手机号最多可以绑定1个开发者账号；"
        />
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="③ 换绑成功后，一周内不能再次换绑。"
        />
      </div>
      <a-form
        :model="formState"
        ref="formRef"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="margintop18"
        :colon="false"
      >
        <a-form-item label="当前登录账号" name="name">
          <span>{{ formState.name }}</span>
        </a-form-item>
        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item
              label="登录密码"
              name="password"
              :rules="[{ required: true, message: 'Please input your password!' }]"
            >
              <a-input-password v-model:value="formState.password" class="my_input" />
            </a-form-item>
          </a-col>
          <a-col
            ><span class="input_suffix" @click="forgotPassword(ispassw)">
              忘记密码?</span
            ></a-col
          >
        </a-row>

        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item label="新手机号">
              <a-input
                v-model:value="formState.tel"
                allow-clear
                placeholder="请输入新手机号"
                class="my_input"
              />
            </a-form-item>
          </a-col>
          <a-col>
            <a-button
              type="primary"
              :disabled="isCountingDown_tel"
              @click="handleCaptchaClick('tel')"
              >获取验证码</a-button
            >
          </a-col>
        </a-row>
        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item label="验证码">
              <a-input
                v-model:value="formState.code"
                allow-clear
                placeholder="请输入验证码"
                class="my_input"
              />
            </a-form-item>
          </a-col>
          <a-col
            ><span class="input_suffix">
              {{ isCountingDown_tel ? `${seconds_tel}秒` : "" }}</span
            ></a-col
          >
        </a-row>
      </a-form>
      <a-col :span="3" :xs="24">
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
          class="margintop18"
        >
          <a-button
            htmlType="submit"
            style="margin-right: 16px; background-color: rgba(76, 200, 126, 1)"
            type="primary"
            @click="onSave"
            >确认</a-button
          >
          <a-button style="margin-left: 8px" @click="cancel">取消</a-button>
        </a-form-item>
      </a-col>
    </a-card>
    <a-card
      title="密码设置"
      class="box-card"
      bordered
      headStyle="text-align: center;font-weight: bold;font-size: 20px;"
      v-else-if="route.params.switchingType == 2"
    >
      <div class="process margintop18">
        <div class="step">
          <div class="step-number completed">1</div>
          <div class="step-label">登录账号验证身份信息</div>
        </div>
        <div class="step">
          <div class="step-number active">2</div>
          <div class="step-label">重置登录密码</div>
        </div>
        <div class="step">
          <div class="step-number">3</div>
          <div class="step-label">确认重置密码</div>
        </div>
        <div class="step">
          <div class="step-number">4</div>
          <div class="step-label">重置成功</div>
        </div>
      </div>
      <div class="tips_box margintop18">
        <a-typography-title :level="5" class="tips"
          ><ExclamationCircleOutlined />温馨提示</a-typography-title
        >
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="① 换绑成功的手机号可用于登录账号、找回密码、接受验证码等所有功能。"
        />
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="② 一个手机号最多可以绑定1个开发者账号；"
        />
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="③ 换绑成功后，一周内不能再次换绑。"
        />
      </div>
      <a-form
        :model="formState"
        ref="formRef"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="margintop18"
        :colon="false"
      >
        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item label="绑定账号">
              <a-input
                v-model:value="formState.tel"
                allow-clear
                placeholder="请输入绑定账号"
                class="my_input"
              />
            </a-form-item>
          </a-col>
          <a-col
            ><a-button
              type="primary"
              :disabled="isCountingDown_password"
              @click="handleCaptchaClick('password')"
              >发送验证码</a-button
            ></a-col
          >
        </a-row>
        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item label="验证码">
              <a-input
                v-model:value="formState.code"
                allow-clear
                placeholder="请输入验证码"
                class="my_input"
              />
            </a-form-item>
          </a-col>
          <a-col
            ><span class="input_suffix">
              {{ isCountingDown_password ? `${seconds_password}秒` : "" }}</span
            ></a-col
          >
        </a-row>
        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item
              label="新登录密码"
              name="password"
              :rules="[{ required: true, message: 'Please input your password!' }]"
            >
              <a-input-password v-model:value="formState.password" class="my_input" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          label="确认登录密码"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password" class="my_input" />
        </a-form-item>
        <!-- <div
          style="background-color: #f9f9f9; padding: 12px 12px"
          v-if="ispassw"
        >
          <h4>忘记密码步骤：</h4>
          <a-row :wrap="false">
            <a-col flex="none">
              <a-form-item label="新手机号">
                <a-input
                  v-model:value="formState.tel"
                  allow-clear
                  placeholder="请输入新手机号"
                  class="my_input"
                />
              </a-form-item>
            </a-col>
            <a-col>
              <a-button
                type="primary"
                :disabled="isCountingDown_forgot"
                @click="handleCaptchaClick('forgot')"
                >获取验证码</a-button
              >
            </a-col>
          </a-row>
          <a-row :wrap="false">
            <a-col flex="none">
              <a-form-item label="验证码">
                <a-input
                  v-model:value="formState.code"
                  allow-clear
                  placeholder="请输入验证码"
                  class="my_input"
                />
              </a-form-item>
            </a-col>
            <a-col>
              <a-col
                ><span class="input_suffix">
                  {{ isCountingDown_forgot ? `${seconds_forgot}秒` : '' }}</span
                ></a-col
              >
            </a-col>
          </a-row>

          <a-row :wrap="false">
            <a-col flex="none">
              <a-form-item
                label="新登录密码"
                name="password"
                :rules="[
                  { required: true, message: 'Please input your password!' },
                ]"
              >
                <a-input-password
                  v-model:value="formState.password"
                  class="my_input"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item
            label="确认新登录密码"
            name="password"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input-password
              v-model:value="formState.password"
              class="my_input"
            />
          </a-form-item>
        </div> -->
      </a-form>
      <a-col :span="3" :xs="24">
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
          class="margintop18"
        >
          <a-button
            htmlType="submit"
            style="margin-right: 16px; background-color: rgba(76, 200, 126, 1)"
            type="primary"
            @click="onSave"
            >确认</a-button
          >
          <a-button style="margin-left: 8px" @click="cancel">取消</a-button>
        </a-form-item>
      </a-col>
    </a-card>
    <a-card
      title="换绑邮箱"
      class="box-card"
      bordered
      headStyle="text-align: center;font-weight: bold;font-size: 20px;"
      v-else-if="route.params.switchingType == 3"
    >
      <div class="process margintop18">
        <div class="step">
          <div class="step-number completed">1</div>
          <div class="step-label">登录账号验证身份信息</div>
        </div>
        <div class="step">
          <div class="step-number active">2</div>
          <div class="step-label">输入新邮箱获取验证</div>
        </div>
        <div class="step">
          <div class="step-number">3</div>
          <div class="step-label">确认信息无误</div>
        </div>
        <div class="step">
          <div class="step-number">4</div>
          <div class="step-label">换绑成功</div>
        </div>
      </div>
      <div class="tips_box margintop18">
        <a-typography-title :level="5" class="tips"
          ><ExclamationCircleOutlined />温馨提示</a-typography-title
        >
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="① 换绑成功的手机号可用于登录账号、找回密码、接受验证码等所有功能。"
        />
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="② 一个邮箱最多可以绑定1个开发者账号；"
        />
        <a-typography-paragraph
          ellipsis="tips"
          class="tips"
          content="③ 换绑成功后，一周内不能再次换绑。"
        />
      </div>
      <a-form
        :model="formState"
        ref="formRef"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="margintop18"
        :colon="false"
      >
        <a-form-item label="当前登录账号" name="name">
          <span>{{ formState.name }}</span>
        </a-form-item>
        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item
              label="登录密码"
              name="password"
              :rules="[{ required: true, message: 'Please input your password!' }]"
            >
              <a-input-password v-model:value="formState.password" class="my_input" />
            </a-form-item>
          </a-col>
          <a-col><span class="input_suffix"> 忘记密码?</span></a-col>
        </a-row>

        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item label="新邮箱">
              <a-input
                v-model:value="formState.tel"
                allow-clear
                placeholder="请输入新手机号"
                class="my_input"
              />
            </a-form-item>
          </a-col>
          <a-col>
            <a-button
              type="primary"
              :disabled="countdownConfig.isCountingDown_forgot"
              @click="handleCaptchaClick('forgot')"
              >获取验证码</a-button
            >
          </a-col>
        </a-row>
        <a-row :wrap="false">
          <a-col flex="none">
            <a-form-item label="验证码">
              <a-input
                v-model:value="formState.code"
                allow-clear
                placeholder="请输入验证码"
                class="my_input"
              />
            </a-form-item>
          </a-col>
          <a-col
            ><span class="input_suffix">
              {{
                countdownConfig.isCountingDown_forgot
                  ? `${countdownConfig.seconds_forgot}秒`
                  : ""
              }}</span
            ></a-col
          >
        </a-row>
      </a-form>
      <a-col :span="3" :xs="24">
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
          class="margintop18"
        >
          <a-button
            htmlType="submit"
            style="margin-right: 16px; background-color: rgba(76, 200, 126, 1)"
            type="primary"
            @click="onSave"
            >确认</a-button
          >
          <a-button style="margin-left: 8px" @click="cancel">取消</a-button>
        </a-form-item>
      </a-col>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  width: 100%;
  background: #ececec;
}
.border-radius0 {
  border-radius: 0 !important;
}
.box-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  // color: #303133;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
}
.margintop18 {
  margin-top: 18px;
}
.tips {
  font-size: 12px;
  color: #969696;
}
.tips_box {
  background-color: #edfaf1;
  padding: 12px;
}
.my_input {
  width: 340px;
}
.input_suffix {
  text-align: center;
  vertical-align: middle;
  color: #4cc971;
  cursor: pointer;
}
:deep(.css-dev-only-do-not-override-12oi33h .ant-typography) {
  margin-bottom: 0;
}
//
.process {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
}
.step {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.step::after {
  content: "";
  box-sizing: border-box;
  flex: 1;
  height: 1px;
  margin: 0 14px;
  border: 1px solid #dddddd;
}
.step-number {
  background-color: #4cc971;
  color: white;
  padding: 5px 12px;
  border-radius: 50%;
  margin-right: 4px;
}
.step-number.completed {
  background-color: #4cc971;
}
.step-number.active {
  background-color: #4cc971;
}
.step-label {
  text-align: center;
}
</style>
